{% extends 'base.html' %}

{% block title %}数据导入 - 区块链交易行为特征分析与可视化系统{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="fas fa-file-import me-2"></i>数据导入</h1>
</div>

<!-- 导入表单 -->
<div class="card mb-4">
    <div class="card-header bg-primary text-white">
        <h5 class="mb-0"><i class="fas fa-upload me-2"></i>上传交易数据</h5>
    </div>
    <div class="card-body">
        <form id="import-form" enctype="multipart/form-data">
            <div class="mb-3">
                <label for="csv-file" class="form-label">CSV文件</label>
                <input class="form-control" type="file" id="csv-file" name="csv_file" accept=".csv" required>
                <div class="form-text">
                    请上传包含交易数据的CSV文件。文件必须包含以下列：TxHash, BlockHeight, TimeStamp, From, To, Value
                </div>
            </div>
            <div class="form-check mb-3">
                <label class="form-check-label" for="skip-duplicates">
                    跳过重复交易（根据交易哈希判断）
                </label>
            </div>
            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary" id="import-btn">
                    <i class="fas fa-file-import me-2"></i>开始导入
                </button>
            </div>
        </form>
    </div>
</div>

<!-- 导入进度 -->
<div id="import-progress" class="card mb-4" style="display: none;">
    <div class="card-header bg-info text-white">
        <h5 class="mb-0"><i class="fas fa-spinner me-2"></i>导入进度</h5>
    </div>
    <div class="card-body">
        <div class="progress mb-3">
            <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
        </div>
        <div id="progress-status" class="text-center">准备导入...</div>
    </div>
</div>

<!-- 导入结果 -->
<div id="import-result" class="card mb-4" style="display: none;">
    <div class="card-header bg-success text-white">
        <h5 class="mb-0"><i class="fas fa-check-circle me-2"></i>导入结果</h5>
    </div>
    <div class="card-body">
        <div class="alert alert-success">
            <h5><i class="fas fa-info-circle me-2"></i>导入完成</h5>
            <p id="import-summary">成功导入 0 条记录。</p>
        </div>
        <div id="import-details">
            <h6>导入详情：</h6>
            <ul class="list-group">
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    总记录数
                    <span id="total-records" class="badge bg-primary rounded-pill">0</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    成功导入
                    <span id="imported-records" class="badge bg-success rounded-pill">0</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    重复跳过
                    <span id="skipped-records" class="badge bg-warning rounded-pill">0</span>
                </li>
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    失败记录
                    <span id="failed-records" class="badge bg-danger rounded-pill">0</span>
                </li>
            </ul>
        </div>
    </div>
</div>

<!-- 错误消息 -->
<div id="error-message" class="alert alert-danger" style="display: none;">
    <h5><i class="fas fa-exclamation-triangle me-2"></i>导入出错</h5>
    <p id="error-text"></p>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const importForm = document.getElementById('import-form');
        const importProgress = document.getElementById('import-progress');
        const importResult = document.getElementById('import-result');
        const errorMessage = document.getElementById('error-message');
        const progressBar = document.getElementById('progress-bar');
        const progressStatus = document.getElementById('progress-status');
        const importSummary = document.getElementById('import-summary');
        const totalRecords = document.getElementById('total-records');
        const importedRecords = document.getElementById('imported-records');
        const skippedRecords = document.getElementById('skipped-records');
        const failedRecords = document.getElementById('failed-records');
        
        importForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 隐藏错误消息
            errorMessage.style.display = 'none';
            
            // 显示进度条
            importProgress.style.display = 'block';
            importResult.style.display = 'none';
            
            // 获取表单数据
            const formData = new FormData(importForm);
            
            // 设置进度状态
            progressStatus.textContent = '正在上传文件...';
            progressBar.style.width = '10%';
            
            // 发送请求
            fetch('/api/import_data', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络响应异常: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log('导入结果:', data);
                
                // 更新进度条为100%
                progressBar.style.width = '100%';
                progressStatus.textContent = '导入完成！';
                
                // 更新结果显示
                if (data.success) {
                    // 显示成功结果
                    importResult.style.display = 'block';
                    importSummary.textContent = `成功导入 ${data.imported} 条记录。`;
                    totalRecords.textContent = data.total;
                    importedRecords.textContent = data.imported;
                    skippedRecords.textContent = data.skipped;
                    failedRecords.textContent = data.failed;
                    
                    // 修改标题样式为成功
                    importResult.querySelector('.card-header').className = 'card-header bg-success text-white';
                    importResult.querySelector('.card-header h5').innerHTML = '<i class="fas fa-check-circle me-2"></i>导入结果';
                    
                    // 修改提示样式为成功
                    importResult.querySelector('.alert').className = 'alert alert-success';
                } else {
                    // 显示错误信息
                    errorMessage.style.display = 'block';
                    document.getElementById('error-text').textContent = data.error || '导入过程中发生未知错误';
                    
                    // 隐藏结果卡片
                    importResult.style.display = 'none';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                
                // 隐藏进度条
                importProgress.style.display = 'none';
                
                // 显示错误信息
                errorMessage.style.display = 'block';
                document.getElementById('error-text').textContent = '无法完成导入: ' + error.message;
            });
        });
    });
</script>
{% endblock %}